import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
     // 相当于商店
    list: [
    
      {
        id: 1,
        title: '香蕉',
        count: 1,
        price: 10,
        img: "https://img2.baidu.com/it/u=3420484142,1981428872&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=424", 
        check:true
      },
      {
        id: 2,
        title: '苹果',
        count: 1,
        price: 5,
        img: "https://img1.baidu.com/it/u=2806546300,382552044&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750",
        check:true
      },
      {
        id: 3,
        title: '西瓜',
        count: 1,
        price: 7,
        img: "https://img1.baidu.com/it/u=172822880,3283292092&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        check:true
      },
     
    ],
    //购物车数据
    carList:[]
  },
    getters:{
      //总数量
      allCount(state) {
        return state.carList.reduce((prev, next) => {
        return prev + next.count
      },0) 
      }
    },
    mutations: {
      // 官网对mutation的定义：更改Vuex的store中的状态的唯一方法是提交mutation。
      //笔者对mutations的理解是：Vuex需要对state进行管理，则必须控制state的维护入口，
      //因此所有对state的变更请求都必须通过mutations来完成。这
      //和Vue通过Object.defineProperty和Proxy来监听data中的数据变化有异曲同工之妙。
      // 同步修改
      ADD_CARLIST(state, { item }) {
        // 判断商品是否在购物车中  如果有让下标相同
        const index = state.carList.findIndex(items => items.id === item.id)
        //没有在购物车中
        if (index === -1) {
          state.carList.push(item)
        } else {
          state.carList[index].count += 1 
        }
        // console.log( state.carList.findIndex(items => items));
      },
      DEL_CARLIST(state,{index}) {

        state.carList[index].count -= 1
        
      },
      REM_CARLIST(state,{index}) {
        state.carList.splice(index,1)
      }
    },
})
export default store